<template>
  <div :class="['ccui-navigation', { 'approval-navigation': isApproval }]">
    <el-button
      size="mini"
      type="primary-icon-medium"
      icon="icon-ccui-return"
      @click="$emit('handleBack')"
    >
      返回
    </el-button>
    <div class="ccui-navigation-divider" />
    <!-- 面包屑 -->
    <el-breadcrumb
      class="ccui-navigation-crumbs-container"
      separator-class="el-icon-arrow-right"
    >
      <el-breadcrumb-item
        :to="{ path: $store.getters.getBreadcrumb('level1').path }"
        >{{ $store.getters.getBreadcrumb("level1").name }}</el-breadcrumb-item
      >
      <el-breadcrumb-item
        v-for="(item, index) in breadcrumbArr"
        :key="index"
        :to="{ path: item.path }"
        >{{ item.text }}</el-breadcrumb-item
      >
      <el-breadcrumb-item v-if="breadcrumbLastItem && state === 'detail'">
        {{ stateMap[state] }}
        <span class="ccui-curr-crumb ccui-ml-10">{{ breadcrumbLastItem }}</span>
      </el-breadcrumb-item>
      <el-breadcrumb-item v-else-if="breadcrumbLastItem && state !== 'detail'">
        <span class="ccui-curr-crumb ccui-ml-10">{{
          stateMap[state] + breadcrumbLastItem
        }}</span>
      </el-breadcrumb-item>
      <el-breadcrumb-item v-else-if="settlementName && breadcrumbLastItem">
        {{ stateMap[state] }}
        <span class="ccui-curr-crumb ccui-ml-10">{{ breadcrumbLastItem }}</span>
        <span class="ccui-curr-crumb ccui-ml-10">{{ settlementName }}</span>
      </el-breadcrumb-item>

      <el-breadcrumb-item v-else>
        <span class="ccui-curr-crumb">{{ stateMap[state] }}</span>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  name: "breadcrumb",
  props: {
    breadcrumbArr: {
      type: Array,
      default: () => []
    },
    settlementName: {
      type: String,
      default: ""
    },
    breadcrumbLastItem: {
      type: String,
      default: ""
    },
    state: {
      type: String,
      default: ""
    },
    isApproval: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      stateMap: {
        create: "新增",
        edit: "编辑 ",
        detail: "查看"
      }
    };
  }
};
</script>

<style lang="scss">
.el-breadcrumb__inner a:hover,
.el-breadcrumb__inner.is-link:hover {
  .span {
    color: #9b9b9b;
  }
}
</style>
